<script setup lang="ts">
import type { PropType } from 'vue'
import type { StorageSku, comDispatcherType } from '@/pluginPackage/goods/commodityInfo/types'
import { DiscountType } from '@/apis/good/model'

defineProps({
  currentChoosedSku: {
    type: Object as PropType<StorageSku>,
    default() {
      return {}
    },
  },
})

const emit = defineEmits(['iconClick'])
const { divTenThousand } = useConvert()
const $comProvide = inject('comProvide') as comDispatcherType
const discountList = computed(() => {
  const list: string[] = []

  Object.keys($comProvide.discountMap.value).forEach((key) => {
    const mapKey = key as keyof typeof DiscountType
    if (DiscountType[mapKey]) {
      list.push(`${DiscountType[mapKey]}减 ${divTenThousand($comProvide.discountMap.value[mapKey]?.discount || '0').toFixed(2)}`)
    }
  })
  return list
})
</script>

<template>
  <view class="subsection">
    <view class="subsection__coupon">
      <scroll-view scroll-x style="white-space: nowrap; width: 100%">
        <template v-if="discountList.length">
          <u-tag
            v-for="(item, index) in discountList"
            :key="index"
            :text="item"
            type="error"
            style="margin-right: 10rpx"
            border-color="transparent"
            color="#E31436 "
          />
        </template>
        <text v-else class="subsection__coupon--msg">更多优惠</text>
      </scroll-view>
    </view>
    <u-button type="error" size="mini" shape="circle" @click="emit('iconClick')">
      <view class="pre-btn">
        <text>优惠</text>
        <text class="pre-btn--circle"> </text>
      </view>
    </u-button>
  </view>
</template>

<style scoped lang="scss">
@include b(subsection) {
  @include flex;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 80rpx;
  background: #fff;
  @include e(coupon) {
    width: 560rpx;
    @include m(msg) {
      color: #999999;
      font-size: 24rpx;
    }
  }
}
@include b(coupon-tag) {
  display: inline-block;
  line-height: 50rpx;
  font-size: 12rpx;
  padding: 0 15rpx;
  height: 50rpx;
  color: #e66479;
  border-radius: 15rpx;
  background: #fff0ed;
}
@include b(pre-btn) {
  @include flex;
  @include m(circle) {
    margin-left: 5rpx;
    position: relative;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 243, 244, 1);
    border-radius: 50%;
    &::after {
      position: absolute;
      content: '>';
      color: red;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
